<script setup>
import {ref, inject} from 'vue'
import {
  ArrowUndoOutline as BackIcon,
} from "@vicons/ionicons5"
import {register} from  '@/res/api/user_api'
const {toPage} = inject('toPage')
const regRef = ref(null)
const rPasswordFormItemRef = ref(null);
const user = ref({
  username:null,
  password:null,
  rePwd:null,
  phone:null,
  email:null
})
const rules = {
  username:{
    required:true,
    validator(rule, value){
      if(!value){
        return new Error("请输入账户")
      } else if (value.length<6){
        return new Error("账户至少为六位数")
      }
    },
    trigger: ['input','blur']
  },
  password:[
    {
      required: true,
      message: "请输入密码"
    }
  ],
  rePwd:[
    {
      required: true,
      message: "请再次输入密码",
      trigger: ["input", "blur"]
    },
    {
      validator: validatePasswordStartWith,
      message: "两次密码输入不一致",
      trigger: "input"
    },
    {
      validator: validatePasswordSame,
      message: "两次密码输入不一致",
      trigger: ["blur", "password-input"]
    }
  ],
  phone:{
    required:false,
    validator(rule, value){
      if(value && value.length<11){
        return new Error("电话为11位")
      }
    },
    trigger: ['input','blur']
  },
  email:{
    required:false,
    validator(rule, value){
      if(value && value.length<6){
        return new Error("格式错误")
      }
    },
    trigger: ['input','blur']
  }
}
function validatePasswordStartWith(rule, value) {
  return !!user.value.password && user.value.password.startsWith(value) && user.value.password.length >= value.length;
}
function validatePasswordSame(rule, value) {
  return value === user.value.password;
}
function handlePasswordInput() {
  if (user.value.rePwd) {
    rPasswordFormItemRef.value?.validate({ trigger: "password-input" });
  }
}
//校验注册
function handleValidateClick(e) {
  e.preventDefault();
  regRef.value?.validate((errors) => {
    if (!errors) {
      $loading.start()
      register({
        username: user.value.username,
        password: user.value.password,
        phone: user.value.phone,
        email: user.value.email,
      }).then((res) =>{
        $message.success(res.message);
        const time = setTimeout(()=>{
          $loading.finish()
          toPage('login')
        },1000)
        console.log(res)
      }).catch((err) => {
        $loading.error()
      })

    } else {
      $message.destroyAll()
      $message.error("校验识别，请检测账户名/密码是否正确");
    }
  });
}
</script>

<template>
  <n-flex justify="center" align="center" class="register">
    <div class="reg-body">
      <div class="reg-img"/>
      <div class="reg-form">
        <n-space justify="end" :style="{margin:'.5rem 0'}">
          <n-icon @click="toPage('login')" class="hover-pointer" title="返回登录">
            <BackIcon/>
          </n-icon>
        </n-space>
        <n-form
            ref="regRef"
            :rules="rules"
            :model="user"
            label-align="left"
            label-placement="left"
            :label-width="81"
        >
          <n-form-item path="username" label="用户名">
            <n-input type="text" v-model:value="user.username" placeholder="请输入用户名"/>
          </n-form-item>
          <n-form-item path="password" label="密码">
            <n-input type="password"
                     v-model:value="user.password"
                     placeholder="请输入密码"
                     @input="handlePasswordInput"
                     @keydown.enter.prevent
                     show-password-on="mousedown"/>
          </n-form-item>
          <n-form-item path="rePwd"
                       label="重复密码"
                       first
                       ref="rPasswordFormItemRef">
            <n-input type="password"
                     v-model:value="user.rePwd"
                     :disabled="!user.password"
                     placeholder="请再一次输入密码"
                     show-password-on="mousedown"
                     @keydown.enter.prevent
            />
          </n-form-item>
          <n-form-item path="phone" label="电话" >
            <n-input type="text" v-model:value="user.phone" placeholder="请输入电话"/>
          </n-form-item>
          <n-form-item path="email" label="邮箱">
            <n-input type="text" v-model:value="user.email" placeholder="请输入邮箱"/>
          </n-form-item>
        </n-form>
        <n-button type="info" block @click="handleValidateClick">注 册</n-button>
      </div>
    </div>
  </n-flex>
</template>

<style lang="scss" scoped>
.register{
  width: 100%;
  height: 100vh;
}
.reg-body{
  padding: 0;
  position: relative;
  width: 64vw;
  height: 54vh;
  box-shadow: 2px 2px 12px 2px #f5f5f5 inset;
  /* 指定动画 */
  animation-name: testKey;
  /* 设置动画所需时间 */
  animation-duration: 5s;
  /* 设置动画延迟 */
  animation-delay: 0.5s;
  .reg-img{
    display: inline-block;
    position: relative;
    width: 45%;
    height: 100%;
    background: url("/src/assets/picture/registerBg.png");
    background-size: 100% 100%;
  }
  .reg-form{
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    width: 47%;
    height: 100%;
    margin: 0 4%;
  }
}
</style>
